<script setup lang="ts">
import { computed } from "vue";

const props = defineProps(['list', 'hasMore', 'isLoading', 'loadMore']);

/** loading 的状态 */
const loadStatus = computed(() => {
  if (props.isLoading) {
    return "loading";
  } else if (!props.hasMore) {
    return "nomore";
  } else {
    return "loadmore";
  }
});

/** 各状态文字说明 */
const contentText = {
  contentdown: "点击加载更多",
  contentrefresh: "正在加载",
  contentnomore: "没有更多数据了",
};

/** 是否无数据 */
const isEmpty = computed(() => {
  if (!props.hasMore && props.list.length === 0) return true;
  return false;
});
</script>

<template>
  <!-- list -->
  <slot></slot>

  <!-- empty -->
  <view v-if="isEmpty" class="h-[50vh] flex flex-col items-center justify-center">
    <view class="text-center text-gray">
      <view class="i-quill-signature mx-auto h-25 w-25" />
      <view class="text-sm"> 数据为空 </view>
    </view>
  </view>

  <!-- LoadMore -->
  <view v-else class="py-3 flex justify-around text-(xs black/60)">
    <view v-show="loadStatus == 'loadmore'" @click="loadMore()">点击加载更多</view>
    <view v-show="loadStatus == 'loading'">正在加载中...</view>
    <view v-show="loadStatus == 'nomore'">没有更多数据了</view>
  </view>
</template>
